<template>
  <div class="content">
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="rank-content" :id="id" :data="data" v-if="show"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    chartTitle: {
      type: Object
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    color: {
      type: Array,
      default: () => {
        return ['#0DE8FB', '#0E6DE9', '#F4CD28', '#499A6F', '#A3D804', '#DE6B00']
      }
    },
    legend: {
      type: Boolean,
      default: false
    },
    to: {
      type: String
    },
    shadow: {
      type: Boolean,
      default: false
    },
    setKey: {
      type: Object
    },
    tab: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      }
    },
    legendPositon: {
      type: [String, Number],
      default: 'center'
    },
    YLabelSuffix: {
      type: String
    },
    yName: {
      type: String
    }
  },
  data() {
    return {
      id: '',
      btnActived: 1,
      show: true
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
      let $this = this
      window.onresize = function() {
        $this.chart.resize()
      }
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.$emit('tab-click', name)
    },
    _initBar() {
      let itemFontSize = document.documentElement.clientHeight * 0.013
      let series = []

      let source = []
      let setKey = this.setKey

      if (setKey) {
        for (let i = 0; i < this.data.length; i++) {
          source.push({
            product: this.data[i][setKey.product],
            count: this.data[i][setKey.count]
          })
        }
      } else {
        source = this.data
      }
      let option = {
        title: this.chartTitle,
        color: this.color,
        legend: {
          type: 'scroll',
          icon: 'roundRect',
          x: this.legendPositon,
          top: 5,
          show: this.legend,
          pageIconColor: '#fff',
          pageTextStyle: {
            color: '#fff'
          },
          textStyle: {
            color: '#000',
            fontSize: itemFontSize
          },
          itemWidth: itemFontSize,
          itemHeight: itemFontSize
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '4%',
          right: '5%',
          top: this.legend ? '18%' : '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false,
            type: 'category',
            axisLabel: {
              fontSize: itemFontSize,
              color: '#000',
              formatter: function(params) {
                // 超出省略
                if (params != undefined) {
                  params = params.toString()
                  // var maxlength = 5
                  // if (params.length > maxlength) {
                  //   return params.substring(0, maxlength) + '...'
                  // } else {
                  return params
                  // }
                }
              }
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#7389B9'
              }
            },
            splitLine: {
              show: false
            },
            //x轴全部显示
            // axisLabel: {
            //   interval: 0,
            //   rotate: 40
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            name: this.yName,
            nameTextStyle: {
              color: '#333'
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            },
            axisLabel: {
              formatter: value => {
                let result = ''
                if (value > 1000) {
                  result = value / 10000
                  return this.YLabelSuffix === undefined ? result + '万' : result + this.YLabelSuffix
                } else {
                  return this.YLabelSuffix === undefined ? value : value + this.YLabelSuffix
                }
              },
              color: '#000',
              fontSize: itemFontSize
            },
            axisLine: {
              lineStyle: {
                color: '#7389B9'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            }
          }
        ],
        series: series,
        dataset: {
          source: source
        }
      }
      if (this.data.length > 0) {
        for (let i = 0; i < Object.keys(this.data[0]).length - 1; i++) {
          series.push({
            // name: '邮件营销',
            type: 'line',
            // encode: {
            // 	x: [4]
            // },
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              color: option.color[i]
            },
            areaStyle: {
              // show: false,
              opacity: this.shadow ? 1 : 0,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: option.color[i] // 0% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(255,255,255, .05)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          })
        }
      }
      let documentChart = document.getElementById(this.id);
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart);
        this.chart.setOption(option);
      }
      window.addEventListener('resize', () => {
        itemFontSize = document.documentElement.clientHeight * 0.013 > 14 ? 13 : document.documentElement.clientHeight
        this.chart.resize()
        this.show = false
        setTimeout(() => {
          this.show = true
        }, 300)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;

  .group {
    display: flex;
    padding: 10px;

    div {
      width: 9.722vh;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 20px;
    }

    .active {
      // background-image: url(../../../assets/daping/components/activeBtn.png);
      color: #000;
      font-weight: bold;
    }
  }

  .rank-content {
    width: 100%;
    flex: 1;
  }
}
</style>
